<% title t('moments.plural') %>
<% page_new new_moment_path %>

<div class="subtitle">
  <%= t('moments.index.subtitle') %>
</div>

<div class="spacer"></div>

<% if @moments.length > 0 %>
  <%= render :partial => '/search/posts', locals: { data_type: 'moment' } %>

  <div class="stats_divider"></div>

  <div class="hide_on_mobile">
    <%= react_component("ChartControl", props: {
        types: [],
        initialParams: {
            type: 'Moments',
            data: {
                Moments: @react_moments,
            }
        }
    })%>

    <div class="spacer"></div>
 </div>

  <%= render :partial => '/shared/stats', locals: { data_type: 'moment' } %>

  <div id="pages">
    <div class="page">
    <%= render @moments %>
    </div>
  </div>

  <%= paginate @moments %>
<% else %>
<%= raw t('moments.index.instructions', {
    icon: '<i class="fa fa-plus-circle"></i>'
  }) %>

<div class="spacer"></div>

<div id="pages">
  <div class="page">
    <div class="moment no_margin_bottom">
    	<h1 class="moment_name">
          <%= content_tag(:span, '<i class="fa fa-lock"></i>'.html_safe, class: 'yes_title small_margin_right', title: t('comment.control')) %>
          <%= t('moments.index.example_name') %>
      	</h1>

        <strong><%= t('categories.label', count: 1) %></strong> <%= t('moments.index.example_category') %>
        <br><strong><%= t('moods.label', count: 3) %></strong> <%= t('moods.example_moods') %>
    </div>
  </div>
</div>
<% end %>
